@charset "utf-8";

*{
    margin: 0px;
    padding: 0px;
    font-size: 0px;
    box-sizing: border-box;
}

.content{
    padding: 50px;
    .wheel{
        width: 400px;
        height: 400px;
        border-radius: 50%;
        border: 4px solid #fe8b36;
        box-shadow: 0 0 20px #fe8b36;
        position: relative;
    }
    div[class*=item]{
        width: 2px;
        height: 100%;
        background-color: #fecf7a;
        position: absolute;
        margin:  auto;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        p{
            font-size: 14px;
        }
        &::before{
            content: "";
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: #feba65;
            transform: translate(-5px,-10px);
            position: absolute;
        }
    }
    .item2{
        transform: rotateZ(60deg);
    }
    .item3{
        transform: rotateZ(120deg);
    }
    .item4{
        transform: rotateZ(180deg);
    }
    .item5{
        transform: rotateZ(240deg);
    }
    .item6{
        transform: rotateZ(360deg);
    }
}